Tekst automatisch inladen in FlashMX 


Spelen met woorden 


Je website ziet er tegenwoordig maar saai uit en je zou er graag wat beweging in brengen. 
Een leuk tekstje in een scrollvenster, dat automatisch wordt ingeladen lijkt je wel wat. Maar 
is dat niet verschrikkelijk moeilijk? Niet met FlashMX: daarmee kan je met eenvoudige ele- 


menten snel dynamische tekst invoegen! 


ie ooit in Flash met scrollvensters voor lange tekst heeft 
Wee kunnen we geruststellen: een nieuwe tijd is 

aangebroken met de MX-versie. Zelfs in Flash 5 was het 
een gedoe om alles netjes in de plooi te krijgen. Het geheim zit ‘m 
in het assortiment componenten dat klaargemaakt meekomt in 
FlashMX. Componenten zijn elementen die vroeger heel moeilijk 
waren om samen te stellen. Nu wachten ze kant-en-klaar in een af- 
zonderlijk palet op de creatieve vogels. Wie nog niet beschikt over 
dit veelzijdig animatiepakket, kan een proefversie afhalen bij 
[ www.macromedia.com/software/flash/download |. 


Stap 1 
Bepaal je afmetingen 


Je begint vanaf nul met een nieuw document via Fire - New. Dan 
pas je de hoogte en de 


Document Properties 


breedte aan van het film- 


Dimensions: _ 500 px (width) m7 300 px (height) 
pje dat je wil samenstel- 
Match: Printer ) { Contents ) { Default © len Het onze od 5oo 
Background Color. IN pixels breed en 300 pixels 
FrameRate: 12 fps hoog. In dit voorbeeld kie- 
zen we voor een blauwe 

Ruler Units: Pixels 2) 

achtergrond en een nor- 
et (Cancel) COD male ‘Frame Rate’ van 12 


Welke dimensies moet je filmpje hebben? frames je seconde. 


Stap 2 
Tijd voor de Text-tool 


Vervolgens selecteer je de Text-tool uit het gereedschapspalet. Je 
merkt dat de instellingen in het Properties-palet zich automatisch 
hebben aanpast aan de aard van het geselecteerde gereedschap en 
het object dat wordt aangeklikt. Er worden verschillende opties be- 
schikbaar die je nodig kan hebben voor een tekstvak. Wij kiezen 
voor DYNAMIC TEXT en dan trekken we met de Text-tool een ruim 
tekstvak. In het Properties-venster kies je een lettertype, een tekst- 


f = == nn @® 

9 A Lmamiciea B) A (Verdana © rm EeEZWEEsE ® 
GED iv o |) af (Normal B Auto kerr D| (Format. | 
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Net zoals bij een tekstverwerker bepaal je het uiterlijk van de tekst. 
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kleur en een stijl. Je kan de afmetingen en de positie van het tekst- 
vak wijzigen. Bovendien ga je dit object een naam geven. Daarom 
klik je op de woorden INSTANCE NAME. Vanaf nu noemen we dit 
tekstvak SCROLLER. 


Stap 3 
Centreer je filmpje 


Je bent nog niet klaar met het Properties-venster. Klik op het uit- 
klapmenu dat je aantreft onder de woorden SINGLE LINE en daar op- 
teer je voor MULTILINE. Ten slotte merk je de vier uitlijnknoppen 
aan de rechterkant van het Properties-panel. Voor het sprookje dat 
wij gaan plaatsen kiezen we CENTER JUSTIFY. 


hid Dynamic Text We) A Verdana B) u WB [B el 
[A äv oe all } Auto Kern e) 

w: [30.0 | x: [72.0 CE ] E 

H-[z200lv:l259 | @ 


Target: : =| 


Het scrollvenster bevat verschillende tekstlijnen en we centreren de tekst. 


Stap 4 a 


Ip Color Swatches 
Haal componenten op 


v Components LE 


{ Flash UI Components ) 
Ziezo, het enige dat je nog mist, is de Elchecsox [P combosox 
schuifbalk van de scroller. Die vindjein Sussex GI pusheuwon 
het Components-panel. Als datvenster nog  @lsaaroguwon W scrongar 
niet op je bureaublad staat, kan je hetop- BÀ scronrane 


roepen door uit het hoofdmenu Winpow 
— COMPONENTS te kiezen. In dat panel her- 
ken je verschillende gebruiksklare com- 
ponenten (Checkbox, ListBox, ScrollPane..). Kies de component 
ScrollBar. Klik erop en sleep het uit dit panel en laat het terechtko- 
men op je tekstvak dat je daarnet hebt gemaakt. De ScrollBar Com- 
ponent zal zich vanzelf aan de hoogte van het tekstvak aanpassen. 


Haal het componenten- 
venster erbij. 


Stap 5 
Voeg de tekst in 


Nu geef je de tekst in die straks gescrold zal worden. Hier werd het 
sprookje van de koning met de lange baard eerst klaargemaakt in 


eoe 


een Word-document. Dan is het gewoon een kwestie van kopiëren 
en plakken. De muisaanwijzer zal de vorm aannemen van een ver- 


[ Sprookje ticaal lijntje zoals bij 
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Back 


gsf | fie: / localhost /Volumes /TiBook/Users /dirk/Desktop/Sprook je.html 


een tekstverwerker. 

Ziezo, bewaar het be- 
stand en bekijk de 
voorvertoning in je 
browser door achter- 
eenvolgens FILE — 
PUBLISH PREVIEW en 
HTML te selecteren. 


@ f 


Refresh _ Home 


Forward _ Stop È_AutoFill__ Print Mail 


Zo zie je het in je 
favoriete browser. 


Stap 6 
Dynamisch inladen 


Je kan nog een stap verder gaan en de tekst zoals dat heet ‘dyna- 
misch laten inladen’. In mensentaal betekent dit dat je geen tekst 
rechtstreeks in het tekstvak hoeft in te geven. Een scriptje zal de 
woorden zelf opzoeken en importeren uit een bestand dat zich op 
de server bevindt. Dat heeft het enorme voordeel dat je de inhoud 
van dit tekstvak snel kan wijzigen. Je hoeft geen vinger meer naar 
Flash of html uit te steken. Je laadt simpelweg een nieuw of aan- 
gepast tekstbestand op de server en klaar is Kees. 


Stap 7 
Automatisch tekst inladen 


Wanneer het tekstvak met de scrollknop klaar is, klik je met de 
rechtermuisknop op een keyframe van de tijdlijn en zo roep je het 
Actions-venster op. In het Actions-venster kan je de scripts inge- 
ven die worden afgespeeld wanneer een animatie een bepaald fra- 
me op de tijdlijn heeft bereikt. Omdat je op het eerste keyframe 
hebt geklikt, zal het script onmiddellijk worden uitgevoerd. In het 
Actions-venster geef je de volgende code in: 


loadText = new loadVars(); 
loadText.load(“inlees.txt”); 
Ilcreating the loadVarsText function 
loadText.onLoad = function() { 

scroller.text = this.inleestext; 


6 


Dat is alles wat het FlashMX-bestand betreft. Je moet nog wel het 
tekstbestand aanmaken vanwaar de tekst automatisch zal worden 
geïmporteerd. Als je het stukje code bekijkt, dan merk je vast dat 
er wordt verwezen naar een document dat ‘inlees.txt’ heet. Je kan 


WAS Ji) DAARNET NIET MET 
DIE TEKST BELG ? 


VAWIEL, MAAR Hij IS 
CNEN GAAN JOGGEN / 


WERKEN MET DYNAMISCHE TEKST 


uiteraard de naam wijzigen, maar hij moet wel overeenkomen met 
de naam van het bijgevoegde txt-bestand. Het doet er niet toe wel- 
ke teksteditor je gebruikt. Zet je muisaanwijzer voor het eerste 
woord van je tekst en druk op ENTER. Typ daarna de woorden: IN- 
LEESTEXT=:. Bewaar dit tekstbestand als INLEES.TxT en plaats het in 
dezelfde map, als die waarin je Flash-animatie zich bevindt. Bekijk 
de Flash-animatie en je zal merken dat de tekst die in je tekstbe- 
stand staat nu werd geïmporteerd in het tekstvak dat van schuif- 
balken is voorzien. 


Ce] 
wv Actions - Movie Clip 


E] Actions for [No instance name assigned} ( ScrollBar) [5 T 


E Actions 
B] Movie Control 
E Browser /Network 
@ fscommand 
D geturL 
@ loadMovie 
® loadvariables 
@ untoadMovie 
GÌ Movie clip Control | BOK RE LZ 35) 
) variables | onClipEvent (load) { 


@ conditions/Loops loadText = new LoadVars}; 
@ Printing loadText. load{"inlees. txt"); 


a /{ creating the loadVarsText function 
User-Defined Functions loadText.onload = function() { 

EÌ Miscellaneous Actions 

Operators } kil 

G Functions 

Zl] constants ke 
Properties 
… 


scroller.text = this.inleestext; 


Lines 1 - 8 selected. 


Dankzij dit foefje zal de tekst automatisch worden geïmporteerd. 
— Dirk Schoofs — 


Html: Hypertext Markup Language. Een soort computertaal waarmee web- 
pagina’s worden aangemaakt. Eigenlijk zijn Html-pagina’s gewone tekstpagi- 
na’s met allerlei codes die verwijzen naar de kleur, de beelden, de opmaak, 
het geluid waarmee deze pagina’s op een browser worden getoond. 


Server: Centrale netwerkcomputer die zijn diensten verleent aan de andere 
computers in het netwerk. 
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